<template>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统中心</el-breadcrumb-item>
        <el-breadcrumb-item>原材料管理</el-breadcrumb-item>
        <el-breadcrumb-item>原材料添加</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card class="box-card">
        <el-form :model="material" :rules="materialRules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-row :gutter="20">
            <el-col :span="10">
              <el-form-item label="原材料名称" prop="name">
              <el-input v-model="material.name"></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="10">
            <el-form-item label="单价" prop="price">
              <el-input v-model="material.price"></el-input>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="10">
              <el-form-item label="化学元素叫法" prop="chemical" >
              <el-input v-model="material.chemical"></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="密度(g/cm³)" prop="density">
              <el-input v-model="material.density"></el-input>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="10">
              <el-form-item label="硬度" prop="hardness" >
              <el-input v-model="material.hardness"></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="材料介绍" prop="remarks">
              <el-input v-model="material.remarks"></el-input>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <span>{{   1  }}</span>
            </el-col>
            <el-col :span="6">
              <el-button type="info" @click="back">返回</el-button>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" @click="submit">提交</el-button>
            </el-col>
            <el-col :span="6">
              <span>{{  1 }}</span>

            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
</template>

<script>
  export default {
    name: 'addMaterial',
    data () {
      return {
        material: {
          name:'',
          price:'',
          chemical:'',
          density:'',
          remarks:'',
          hardness:''
        },
        materialRules: {
          name: [
            {required: true,message: '请填写原材料名称', trigger: 'blur'}
          ],
          price:[
            {required: true,message: '请填写原材料单价', trigger: 'blur'},
            ],
          chemical:[
            {required: true,message: '请填写化学元素叫法', trigger: 'blur'},
            ],
          density:[
            {required: true,message: '请填写原材料密度', trigger: 'blur'},
            ],
          hardness:[
            {required: true,message: '请填写原材料硬度', trigger: 'blur'},
            ],
          remarks:[
            {required: true,message: '请填写原材料描述', trigger: 'blur'},
            ],
        }
      }
    },
    methods: {
      back: function () {
        this.$router.push('/materialMenu')
      },
      submit: function () {
        this.$refs['ruleForm'].validate((valid) => {
          if (!valid) {
            return
          }
          this.$http.post('/material/save', this.material).then((res) => {
            this.$message.success(res.data.message);
            this.$router.push('/materialMenu')
            })
          })
        }
      }
    }



</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 1280px;
  }
</style>
